<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Tabs, type TabsValueChangeDetails } from '@ark-ui/vue/tabs';
import { useRouter } from 'vue-router';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import HotTag from './components/HotTag.vue';
import Journalism from './components/Journalism.vue';
import Repository from './components/Repository.vue';
import Organization from './components/Organization.vue';
import Tag from './components/Tag.vue';
import { addHistory } from '@/home/utils/search-history';

const DEFAULT_TYPE = 'journalism';

const props = defineProps({
  query: {
    type: String,
    default: '',
  },

  type: {
    type: String,
    default: '',
  },
});

const router = useRouter();

const keyword = ref(props.query);
const searchType = ref(props.type || DEFAULT_TYPE);

const { $fetch } = useFetch();
const { data: detail } = useAsyncData(
  'search:detail',
  () => $fetch('/esInfoProduct/getProductTypeCounts', {
    method: 'post',
    data: {
      keyWords: props.query,
    },
  }),
  {
    watch: [() => props.query],
  },
);

watch([() => props.query, () => props.type], ([query, type]) => {
  keyword.value = query;
  searchType.value = type || DEFAULT_TYPE;
});

const submitSearch = () => {
  if (!keyword.value) {
    return;
  }

  addHistory(keyword.value);

  router.replace({
    path: '/search',
    query: {
      type: props.type,
      q: keyword.value,
    },
  });
};

const handleValueChange = (details: TabsValueChangeDetails) => {
  router.push({
    path: '/search',
    query: {
      type: details.value,
      q: keyword.value,
    },
  });
}
</script>

<template>
  <main class="page-search">
    <section class="bg-white py-40">
      <div class="container">
        <form @submit.prevent="submitSearch">
          <div class="relative mx-auto w-640 <md:w-300">
            <input
              v-model.trim="keyword"
              class="w-full border border-[#E8E8E8] rounded-6 border-solid bg-transparent p-12 text-18 text-[#8B8B8B] leading-30 placeholder:(text-[#8b8b8b]) focus-visible:outline-unset"
              :placeholder="$t('home.search.inputPlaceholder')"
              ref="input"
            >
            <button type="submit" class="absolute left--99999 top--999999 size-0"></button>
          </div>
        </form>
      </div>
    </section>

    <Tabs.Root v-model="searchType" @value-change="handleValueChange">
      <Tabs.List class="relative bg-white pb-10">
        <div class="flex items-center gap-x-32 container *:bg-transparent *:text-16 *:text-[rgba(173,173,173,0.95)] *:leading-32 data-[selected]:*:text-[#292929] focus-visible:*:outline-unset">
          <Tabs.Trigger value="journalism">{{ $t('home.search.journalism.title') }}({{ detail?.mapCount?.journalism ?? 0 }})</Tabs.Trigger>
          <Tabs.Trigger value="repository">{{ $t('home.search.repository.title') }}({{ detail?.mapCount?.repository ?? 0 }})</Tabs.Trigger>
          <Tabs.Trigger value="organization">{{ $t('home.search.organization.title') }}({{ detail?.mapCount?.organization ?? 0 }})</Tabs.Trigger>
          <Tabs.Trigger value="tag">{{ $t('home.search.tag.title') }}({{ detail?.mapCount?.tag ?? 0 }})</Tabs.Trigger>
        </div>
        <Tabs.Indicator class="bottom-0 h-2 w-[var(--width)] rounded-1 bg-[#292929]" />
      </Tabs.List>
    </Tabs.Root>

    <section class="flex gap-x-32 container">
      <div class="mt-24 flex-grow">
        <KeepAlive>
          <Journalism :query="props.query" v-if="searchType === 'journalism'" />
          <Repository :query="props.query" v-else-if="searchType === 'repository'" />
          <Organization :query="props.query" v-else-if="searchType === 'organization'" />
          <Tag :query="props.query" v-else-if="searchType === 'tag'" />
        </KeepAlive>
      </div>

      <div class="mt-52 w-376 flex-shrink-0">
        <HotTag />
      </div>
    </section>
  </main>
</template>

<style lang="scss" scoped>
.page-search {
  &:deep() {
    em {
      color: #3d7cfa;
      font-style: normal;
    }
  }
}
</style>
